<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse :value="[0,1]">
          <Panel>
            表单域配置
            <div slot="content">
              <Form :label-width="120">
                <FormItem :required="true" label="绑定表单数据字段">
                  <Input type="text" size="small" v-model="fieldConfig.bindingFieldName"/>
                </FormItem>
                <FormItem label="标签文本">
                  <Input type="text" size="small" v-model="formItemConfig.label"/>
                </FormItem>
                <FormItem label="标签宽度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="formItemConfig.labelWidth" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="隐藏标签">
                  <i-switch size="small" v-model="formItemConfig.hiddenLabel"></i-switch>
                </FormItem>
                <FormItem label="隐藏此表单域">
                  <i-switch size="small" v-model="formItemConfig.hidden"></i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            文本输入框配置
            <div slot="content">
              <Form :label-width="100">

                <FormItem label="输入框类型">
                  <Select size="small" v-model="widgetConfig.type">
                    <Option value="text">字符文本</Option>
                    <Option value="password">密码输入</Option>
                    <Option value="url">URL地址</Option>
                    <Option value="email">邮箱</Option>
                    <Option value="tel">电话</Option>
                  </Select>
                </FormItem>
                <FormItem label="尺寸">
                  <RadioGroup size="small" v-model="widgetConfig.size" type="button">
                    <Radio label="default">默认</Radio>
                    <Radio label="large">大号</Radio>
                    <Radio label="small">小号</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="占位文本">
                  <Input type="text" size="small" v-model="widgetConfig.placeholder"/>
                </FormItem>
                <FormItem label="清空按钮">
                  <i-switch size="small" v-model="widgetConfig.clearable"></i-switch>
                </FormItem>
                <FormItem label="禁用">
                  <i-switch size="small" v-model="widgetConfig.disabled"></i-switch>
                </FormItem>
                <FormItem label="只读">
                  <i-switch size="small" v-model="widgetConfig.readonly"></i-switch>
                </FormItem>
                <FormItem label="最大输入长度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="widgetConfig.maxlength" :active-change="false"></InputNumber>
                </FormItem>
                <FormItemPanel title="输入框内图标">
<!--                  <FormItem :label-width="0">
                    <Input size="small" v-model="icon" placeholder="可触发点击事件的图标"
                           search enter-button="选择" @on-search="openSelectIViewIconDrawer('icon')"/>
                  </FormItem>
                  <div class="m-b-5px"></div>-->
                  <FormItem :label-width="0">
                    <Input size="small" v-model="prefix" placeholder="内左侧图标"
                           search enter-button="选择" @on-search="openSelectIViewIconDrawer('prefix')"/>
                  </FormItem>
                  <div class="m-b-5px"></div>
                  <FormItem :label-width="0">
                    <Input size="small" v-model="suffix" placeholder="内右侧图标"
                           search enter-button="选择" @on-search="openSelectIViewIconDrawer('suffix')"/>
                  </FormItem>
                </FormItemPanel>

              </Form>
            </div>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane name="field_config_tab" tab="main_tabs" label="数据校验">
        <FormItemRuleCreator v-model="formItemConfig.rules"></FormItemRuleCreator>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <FormItemInteractionEditTable :widgetEventCodeConfig="widgetEventCodeConfig"></FormItemInteractionEditTable>
      </TabPane>
    </Tabs>

    <SelectIViewIconDrawer ref="SelectIViewIconDrawer" @onSubmit="selectIViewIconDrawerOnSubmitHandler"></SelectIViewIconDrawer>
  </div>
</template>

<script>
import FormWidgetFormMixin from "@/mixin/FormWidgetFormMixin";

import {createHelpers} from 'vuex-map-fields';
const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItemFromTree',
  mutationType: 'designer/updateLayoutItemFromTree',
});

export default {
  name: "FormItemInputWidgetForm",
  mixins: [FormWidgetFormMixin],
  props: {},
  data() {
    return {
      currentOpenField: ''
    }
  },
  mounted() {

  },
  methods: {

    openSelectIViewIconDrawer (targetField) {
      this.currentOpenField = targetField
      this.$refs.SelectIViewIconDrawer.init()
    },
    selectIViewIconDrawerOnSubmitHandler (val) {
      this[this.currentOpenField] = val
      this.currentOpenField = ''
    }
  },
  computed: {
    ...mapFields({

      fieldConfig: 'component.compConfigData.fieldConfig',
      formItemConfig: 'component.compConfigData.formItemConfig',
      widgetConfig: 'component.compConfigData.widgetConfig',
      icon: 'component.compConfigData.widgetConfig.icon',
      prefix: 'component.compConfigData.widgetConfig.prefix',
      suffix: 'component.compConfigData.widgetConfig.suffix',
      widgetEventCodeConfig: 'component.compConfigData.widgetEventCodeConfig',

    })
  },
  watch: {}
}
</script>

<style scoped>

</style>
